<template>
  <div class="wrap">
    <div class="title">
      <span class="title_t">用户详情信息 -</span><span class="title_c">{{ usersStore.$state.userInfo.userName }}</span>
    </div>
    <a-card class="wrap_card">
      <!-- 用户详情信息模块 -->
      <div class="title_box">
        <img class="title_img" src="./image/user.png" alt="" />
        <span class="title_text" style="left: 2px">用户信息</span>
      </div>
      <a-descriptions :data="data" size="large" style="color: #324569" bordered> </a-descriptions>

      <!-- 设备列表模块 -->
      <div class="dev_list_module_box">
        <!-- 用户设备列表 -->
        <div class="user_dev_list_box dev_list_m_item">
          <div class="title_box">
            <img class="title_img" src="./image/dev1.svg" alt="" />
            <span class="title_text">用户拥有设备</span>
          </div>
          <!-- 头部 -->
          <div class="user_dev_list_header">
            <span class="dev_name">设备名称</span>
            <span class="dev_gid">设备编码</span>
          </div>
          <a-list size="small" :max-height="300" :scrollbar="true" :hoverable="true">
            <a-list-item v-for="(udl, indexU) in usersStore.userDevList" :key="indexU">
              <div class="user_dev_item_box">
                <span class="dev_name">
                  {{ udl.devName }}
                </span>
                <span class="dev_gid">
                  {{ udl.devGId }}
                </span>
                <span class="dev_op_box" @click="devClick(udl)">
                  <icon-arrow-right size="18" />
                  <!-- <img style="width: 18px; height: 18px" src="./image/nav.svg" alt="" /> -->
                </span>
              </div>
            </a-list-item>
          </a-list>
        </div>

        <!-- 其他用户分享的设备列表 -->
        <div class="share_dev_list_box dev_list_m_item">
          <div class="title_box">
            <img class="title_img" style="width: 20px; height: 20px" src="./image/share.svg" alt="" />
            <span class="title_text">他人分享设备</span>
          </div>
          <div class="user_dev_list_header">
            <span class="dev_name">设备名称</span>
            <span class="dev_gid">设备编码</span>
          </div>
          <a-list size="small" :max-height="300" :scrollbar="true" :hoverable="true">
            <a-list-item v-for="(udl, indexU) in usersStore.shareDevList" :key="indexU">
              <div class="user_dev_item_box">
                <span class="dev_name">
                  {{ udl.devName }}
                </span>
                <span class="dev_gid">
                  {{ udl.devGId }}
                </span>
                <span class="dev_op_box" @click="devClick(udl)">
                  <icon-arrow-right size="18" />
                  <!-- <img style="width: 18px; height: 18px" src="./image/nav.svg" alt="" /> -->
                </span>
              </div>
            </a-list-item>
          </a-list>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
export default defineComponent({
  name: 'UserDetail'
})
</script>
<script lang="ts" setup>
// 引入
import type { UserDevType, ShareDevType } from '@/apis/users/model'
import { useUsersStore } from '@/store'
import { useRouter } from 'vue-router'

const router = useRouter()
const usersStore = useUsersStore()

// 设备点击事件
const devClick = (dev: UserDevType) => {
  console.log(dev)
  let devGId = dev.devGId
  router.push({
    path: '/equipment',
    query: {
      devGId: devGId
    }
  })
}

// 用户信息展示数据
const data = ref([
  {
    label: '用户名',
    value: usersStore.$state.userInfo.userName,
    span: 2
  },

  {
    label: '手机号',
    value: usersStore.$state.userInfo.userPhone,
    span: 2
  },
  {
    label: '昵称',
    value: usersStore.$state.userInfo.userNearName,
    span: 2
  },
  {
    label: '邮箱',
    value: usersStore.$state.userInfo.userEmail,
    span: 2
  },
  {
    label: '公司名称',
    value: usersStore.$state.userInfo.userCompany,
    span: 3
  },
  {
    label: '创建时间',
    value: usersStore.$state.userInfo.userCreateTime,
    span: 2
  },
  {
    label: '最后登录时间',
    value: usersStore.$state.userInfo.userLastLogin,
    span: 2
  },
  {
    label: '用户编码',
    value: usersStore.$state.userInfo.userCode,
    span: 3
  },
  {
    label: '微信ID',
    value: usersStore.$state.userInfo.userWeichatId,
    span: 3
  },
  {
    label: '描述',
    value: usersStore.$state.userInfo.userDesc,
    span: 3
  }
])

// 初始化
onMounted(() => {
  console.log(usersStore)
})
</script>

<style lang="scss" scoped>
.wrap {
  padding: 14px;
}

.wrap_card {
  height: 810px;

  .title_box {
    width: 100%;
    height: 34px;
    // line-height: px;
    display: flex;
    flex-direction: row;
    background: linear-gradient(116.91deg, rgba(122, 158, 231, 0.4) 0%, rgba(129, 184, 251, 0.2) 100%);
    margin-bottom: 10px;
    padding-left: 10px;
    border-radius: 4px;
    align-items: center;
    box-sizing: border-box;

    .title_img {
      width: 26px;
      height: 26px;
    }

    .title_text {
      letter-spacing: 1px;
      font-size: 17px;
      color: rgb(15, 18, 63);
      position: relative;
      top: 1px;
      left: 6px;
      // font-weight: ;
    }
  }
}

::v-deep .arco-descriptions-title {
  font-size: 22px;
  font-family: '微软雅黑';
  font-weight: bold;
  color: #324569;
}

::v-deep .arco-descriptions-item-value {
  color: #324569;
}

.title {
  font-size: 17px;
  letter-spacing: 1px;
  font-weight: bold;
  font-family: VIVO1;
  margin-bottom: 10px;
}

.title .title_t {
  font-family: VIVO1;
}

.title .title_c {
  font-size: 16px;
  letter-spacing: 1px;
  margin-left: 10px;
  font-family: VIVO1;
}

.dev_list_module_box {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 20px 0px;

  .dev_list_m_item {
    width: 49%;
  }

  .user_dev_list_box {
    .user_dev_list_header {
      display: flex;
      flex-direction: row;
      align-items: center;
      // border: 1px solid red;
      height: 30px;
      background: rgba(127, 143, 148, 0.479);
      // font-size: 16px;
      color: black;
      .dev_name {
        padding-left: 20px;
        width: 280px;
        // text-align: center;
      }

      .dev_gid {
        width: 280px;
        // text-align: center;
      }
    }

    .user_dev_item_box {
      display: flex;
      flex-direction: row;
      font-size: 14px;
      position: relative;

      .dev_op_box {
        // border: 1px solid red;
        display: inline-block;
        padding-top: 4px;
        padding: 4px 4px 0px 4px;
        border-radius: 4px;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
      }

      .dev_name {
        // padding-left: 20px;
        width: 280px;
        // text-align: center;
      }

      .dev_gid {
        width: 200px;
        // text-align: center;
      }

      .dev_op_box:hover {
        background: rgba(128, 128, 128, 0.16);
        color: blue;
        cursor: pointer;
      }
    }
  }

  .share_dev_list_box {
    .user_dev_list_header {
      display: flex;
      flex-direction: row;
      align-items: center;
      // border: 1px solid red;
      height: 30px;
      background: rgba(127, 143, 148, 0.479);
      // font-size: 16px;
      color: black;
      .dev_name {
        padding-left: 20px;
        width: 280px;
        // text-align: center;
      }

      .dev_gid {
        width: 280px;
        // text-align: center;
      }
    }
  }

  .user_dev_item_box {
    display: flex;
    flex-direction: row;
    font-size: 14px;
    position: relative;

    .dev_name {
      // padding-left: 20px;
      width: 280px;
      // text-align: center;
    }

    .dev_gid {
      width: 200px;
      // text-align: center;
    }

    .dev_op_box {
      // border: 1px solid red;
      display: inline-block;
      padding-top: 4px;
      padding: 4px 4px 0px 4px;
      border-radius: 4px;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }

    .dev_op_box:hover {
      background: rgba(128, 128, 128, 0.16);
      color: blue;
      cursor: pointer;
    }
  }
}
</style>
